//得到轮展图的数量
var meizu_img = document.getElementsByClassName('meizu_img');
// 获取轮展图父级的地方 为了实现鼠标移入移除的停止显示效果
var img = document.getElementById('img');
// 得到背景div 添加背景颜色
var banner = document.getElementById('banner');
// 获得图片圆点的集合
var click_button = document.getElementsByClassName('click_button');
// 获得上一张的按钮
var pre = document.getElementById("pre");
// 获得下一张的按钮
var next = document.getElementById("next");
// 定义颜色数组 
var color = [ '#E4F8FF', '#FFFFFF', '#141414', '#E4ECF7', '#E4E4E4','#EBEBEB'];
//定义初始的图片
var num = 0;
var run = function(){
	for(var i = 0; i < meizu_img.length; i++ ){
		meizu_img[i].style.display = "none";  //消失
		click_button[i].style.backgroundColor ='transparent';
	}
	click_button[num].style.backgroundColor = '#00C3F5';
	banner.style.backgroundColor = color[num];
	meizu_img[num].style.display = "block"; //显示
	if( num  == ( meizu_img.length - 1)){
		num = 0;
	}else{
		num++;
	}

}
// 当圆点事件发生的时候
for(var i = 0 ;i< click_button.length;i++){
	click_button[i].onmouseover = function(){

		this.style.backgroundColor = '#00C3F5';	
	}
	click_button[i].onmouseout = function(){
		this.style.backgroundColor = "transparent";
		if(num != 0){
			click_button[num-1].style.backgroundColor = '#00C3F5';
		}else{
			click_button[click_button.length - 1].style.backgroundColor = '#00C3F5';
		}
		
	}
	ButtonClick(i);
}
// 圆点按钮点击事件发生函数
function ButtonClick( newNum ){
	click_button[newNum].onclick = function(){
		num = newNum;
		run();
	}
}


run();
// 定时器
var time  = setInterval(run,1000);
//当鼠标移入轮播图不变化 清除定时器
img.onmouseover = function(){
	clearInterval(time);
}
// 当鼠标移除轮播图继续变化 启用定时器
img.onmouseout = function(){
	 time = setInterval(run, 1000);	
}

// 下一张按钮next点击事件发生函数
next.onclick = function(){
	run();  //因为点击下一张无非就是执行run()函数
}
pre.onclick = function(){
	 num = num - 2;
	 if( num == -2  ){
		num = meizu_img.length - 2;
	}else if( num == -1 ){
		num = meizu_img.length - 1;
	}
	run();
}
